<template>
  <div id="login">
    <div class="box">
      <el-form :label-position="labelPosition" label-width="50px">
        <h3>影院售票管理系统</h3>
        <el-form-item label="账号">
          <el-input v-model="username" clearable placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
        </el-form-item>
        <el-form-item style="margin-top: 30px">
          <el-button type="primary" size="medium" @click="login">登录</el-button>
          <el-button type="primary" plain @click="resign">注册</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 弹框 -->
      <el-dialog title="注册" :visible.sync="dialogFormVisible" :before-close="close" :modal="false">
        <el-form ref="form" :rules="rules" :model="form" label-width="100px">
          <el-form-item label="用户名称" placeholder="请输入" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="用户密码" placeholder="请输入" prop="password">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex" placeholder="请输入">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号码" placeholder="请输入" prop="phone">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="出生日期" placeholder="请输入" prop="birthday">
            <el-date-picker
              v-model="form.birthday"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleBaoCun">保存</el-button>
          <el-button @click="resetForm">重置</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { login, resignAdmin } from '../../api'
import Vue from 'vue'
import { Input, Button, Message, Form, FormItem } from 'element-ui'
Vue.use(Input)
Vue.use(Button)
export default {
  name: 'Login',
  data() {
    let checkPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入手机号码'))
      } else {
        if (/^1[3|4|5|6|7|8][0-9]{9}$/.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确格式的手机号码'))
        }
      }
    }
    return {
      labelPosition: 'right',
      username: '',
      password: '',
      dialogFormVisible: false,
      form: {},
      rules: {
        name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { validator: checkPhone, trigger: 'blur' },
        ],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        birthday: [{ required: true, message: '请选择日期', trigger: 'blur' }],
      },
    }
  },
  methods: {
    reset() {
      this.username = ''
      this.password = ''
    },
    async login() {
      if (!this.username) {
        Message.error('请输入用户名！')
      } else if (!this.password) {
        Message.error('请输入密码！')
      } else {
        let json = await login(this.username, this.password)
        if (json.success_code === 200) {
          // 设置token
          window.sessionStorage.setItem('token', json.token)
          this.$router.push('/home')
          Message.success('登录成功!')
        } else {
          Message.error(json.message)
        }
      }
    },
    resign() {
      this.dialogFormVisible = true
    },
    close() {
      this.$refs.form.resetFields()
      this.dialogFormVisible = false
    },
    handleBaoCun() {
      this.$refs.form.validate().then(() => {
        this.form.avatar = '/images/admin/touxiang.gif'
        resignAdmin(
          this.form.name,
          this.form.password,
          this.form.sex,
          this.form.phone,
          this.form.birthday,
          this.form.avatar
        ).then((res) => {
          if (res.success_code === 200) {
            this.$message.success('创建管理员成功！')
            this.dialogFormVisible = false
          } else {
            this.$message.error(res.message)
            this.$refs.form.resetFields()
          }
        })
      })
    },
    resetForm() {
      this.$refs.form.resetFields()
    },
  },
}
</script>

<style>
#login {
  width: 100%;
  height: 100%;
  background: url('./images/bg.jpg');
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  color: #fff;
}
.box {
  width: 500px;
  height: 400px;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  border-radius: 4px;
  box-shadow: 0 0 8px 8px #ccc;
}
h3 {
  margin-bottom: 40px;
  font-size: 36px;
  letter-spacing: 2px;
  color: #1e88e5;
  text-align: center;
}
.el-form-item__label {
  font-size: 16px;
}
</style>
